<template>
   <Dialog  :visible.sync="innerVisible">
     <el-form v-loading="dialogLoading" :model="model" :label-position="labelPosition" :rules="rules" ref="ruleForm" label-width="87px">
       <el-row>
         <el-col :span="24">
           <h4>申请信息：</h4>
         </el-col>
         <el-col :span="8">
           <el-form-item label="申请人：">
             <span>{{detailData.founderName}}</span>
           </el-form-item>
         </el-col>
         <el-col :span="8">
           <el-form-item label="申请类型：">
             <span>{{ detailData.credentialType|filterDataBaseDictionary }}</span>
           </el-form-item>
         </el-col>
         <el-col :span="8">
           <el-form-item label="申请时间：">
             <span>{{ detailData.foundtime|unixTimestampFilter }}</span>
           </el-form-item>
         </el-col>
         <el-col :span="24">
           <h4>认证照片：</h4>
         </el-col>
         <el-col :span="12">
           <div class="text-center">
             <UploadImage inline :value="getImage(detailData.site)" readonly></UploadImage>
             <div>（营业执照）</div>
           </div>
         </el-col>
         <el-col :span="12">
           <div class="text-center">
             <UploadImage inline :value="getImage(detailData.site)" readonly></UploadImage>
             <div>（经营场所）</div>
           </div>
         </el-col>
       </el-row>
       <el-row>
         <el-col :span="24">
           <template v-if="findState == 0">
             <el-form-item label="审核意见：" prop="auditState">
               <el-radio-group v-model="model.auditState">
                 <el-radio label="1">通过</el-radio>
                 <el-radio label="2">驳回</el-radio>
               </el-radio-group>
             </el-form-item>
             <el-form-item label="驳回备注:" prop="auditMemo" v-if="model.auditState == 2">
               <el-input type="textarea" :rows="5" v-model="model.auditMemo" placeholder="允许输入200字内"></el-input>
             </el-form-item>
           </template>

           <template class="col-xs-11" v-if="findState == 1">
             <el-row>
               <el-col :span="8">
                 <el-form-item label="审核人：">
                   <span>{{detailData.auditName}}</span>
                 </el-form-item>
               </el-col>
               <el-col :span="8">
                 <el-form-item label="审核意见：">
                   <span>{{detailData.auditState|filterState}}</span>
                 </el-form-item>
               </el-col>
               <el-col :span="8">
                 <el-form-item label="审核时间：">
                   <span>{{detailData.auditTime|unixTimestampFilter}}</span>
                 </el-form-item>
               </el-col>
               <el-col v-if="detailData.auditMemo" :span="24">
                 <el-form-item label="驳回备注：">
                   <span>{{detailData.auditMemo}}</span>
                 </el-form-item>
               </el-col>
             </el-row>
           </template>
         </el-col>
         <el-col class="text-center" :span="24" v-if="findState == 0">
           <el-button @click="innerVisible = false">
             取消
           </el-button>

           <el-button type="primary" :loading="loading" @click="submit">
             确认提交
           </el-button>
         </el-col>
       </el-row>
     </el-form>
   </Dialog>
</template>
<script>
import {dotData, copy, confirm} from '@/utils'
export default {
  props: {
    item: {
      type: Object,
      default() {
        return {}
      }
    },
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    findState: {
      type: Number,
      default: 0
    }
  },
  filters: {
    filterState(value) {
      switch (value) {
        case 1 : return '通过'
        case '1' : return '通过'
        case 2 : return '驳回'
        case '2' : return '驳回'
        case 0 : return '待审核'
        case '0' : return '待审核'
      }
    }
  },
  watch: {
    visible(val, oldVal) {
      if (val === oldVal) {
        return
      }
      if (val) {
        // 重置表单
        this.resetFields()
        // 获取数据
        this.getDetail()
      }
      this.innerVisible = val
    },
    innerVisible(val, oldVal) {
      if (val === oldVal) {
        return
      }
      this.$emit('update:visible', val)
    }
  },
  data() {
    return {
      innerVisible: this.visible,
      labelPosition: 'left',
      model: {
        auditState: '1',
        auditMemo: ''
      },
      rules: {
        auditMemo: [
          { required: true, max: 200, message: '允许输入200字内', trigger: 'blur' }
        ]
      },
      detailData: {},
      loading: false,
      dialogLoading: false
    }
  },
  methods: {
    getImage(val) {
      if (Array.isArray(val)) {
        return val
      }
      if (val && typeof val === 'string') {
        return val.split(',')
      }
      return []
    },
    getDetail() {
      this.dialogLoading = true
      this.$ajax.get('/ms-fahuobao-app/credential/findCredentialInfoById', {credentialId: this.item.id}).then(response => {
        const success = response.success
        if (success) {
          this.detailData = response.data || {}
        }
      }).finally(_ => {
        this.dialogLoading = false
      })
    },
    submit($event) {
      this.$refs['ruleForm'].validate((valid) => {
        if (!valid) {
          return
        }
        let data = copy(this.model, true)
        data.credentialId = this.item.id
        this.loading = true
        this.$ajax.post('/ms-fahuobao-app/credential/modifyCredential', data).then(response => {
          const success = dotData(response, 'success')
          if (success) {
            this.$emit('refresh', true)
            confirm('提交成功', '已提交', {
              type: 'success',
              confirmButtonText: '确定',
              showCancelButton: false
            }).then(_ => {
              this.innerVisible = false
            })
          }
        }).finally(_ => {
          this.loading = false
        })
      })
    },
    resetFields() {
      if (this.$refs['ruleForm']) {
        this.$refs['ruleForm'].resetFields()
      }
    }
  }
}
</script>
